<template>
  <p>count: {{ count }}</p>
  <button @click="fn">count++</button>

  <p>obj: {{ obj }}</p>
  <button @click="fn2">btn</button>
  <button @click="fn3">停止监听</button>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";

const count = ref(1);
const fn = () => {
  count.value++;
};

// watch函数调用，最少两个参数。要监听的变量和回调函数
// 回调函数又可以接受两个参数val, oldVal
watch(count, (val, oldVal) => {
  console.log("count改变了", val, oldVal);
});

const obj = ref({
  name: "zhangsan",
  age: 20,
});
const fn2 = () => {
  obj.value.age = 30;
};
// watch还可以接受第三个参数（对象）
// deep: true表示深度监听
// immediate: true表示进入页面就先调用一次
// once: true表示监听只会触发一次
watch(
  obj,
  () => {
    console.log("age改变了");
  },
  { deep: true, immediate: true, once: true }
);

// watchEffect进入页面就会调用一次
// watchEffect里面会用到一个或者多个响应式数据
// 任意的响应式数据发生改变，都会让这个函数重新执行

// 非常适合用在像分页这种需要依赖变量改变，并且经常需要调用的请求上面
const abc = watchEffect(() => {
  fetch("http://118.24.239.63:3001/api/product/list?page=" + count.value)
    .then((response) => response.json())
    .then((res) => {
      console.log(res);
    });
});

const fn3 = () => {
  // 停止监听
  abc();
};
</script>
